<template>
    <div>
        <van-row class="header d-flex align-items-end" v-show="tl">
            <van-col span="8" >
             <div style="height: 10px;margin-top: 20px;">
              <a href="#" style="color: black;">
                <span class="header-pos">
                  <van-icon name="location" />
                    {{ area == '' ? '珠海' : area }}
                  <van-icon name="arrow" />
                </span>
              </a></div>
            </van-col>
        </van-row>
        
        <!-- <van-row class="header1" v-show="tl2">
        <van-col span="24" class="contained-inpt-div1 d-flex align-items-end">
            <van-search shape="round" 
              placeholder="请输入搜索关键词"
              @click="search"
              class="contained-inpt1">
            </van-search>
        </van-col>
        </van-row> -->

     
        <van-row class="contained">
          
            <div class="inpt-contained">
                <van-row class="contained-inpt-div">
                  <van-sticky>
                    <van-search shape="round"
                      placeholder="请输入搜索关键词" 
                      @click="search"
                      class="contained-inpt">
                    </van-search>
                  </van-sticky>
                </van-row>
            </div>
          
            <!-- 导航按钮 -->
            <van-grid square :column-num="5" :border="false">
                <van-grid-item v-for="(value,index) in aa" :key="index" @click="bb(value.id)" icon="photo-o" class="contained-grid">
                    <van-image :src="require('../../assets/img/'+value.icon)" style="width: 50px;"></van-image>
                    <span style="font-size: 12px;">{{value.name}}</span>
                </van-grid-item>
            </van-grid>
            
            <!-- 分类 -->
            <!-- <div class="mediate-nav d-flex justify-content-around align-items-center">
                <van-button type="primary" to="/orderDetails" size="small" class="mediate-nav-button">点评最高</van-button>
                <van-button type="primary" size="small" class="mediate-nav-button">减配送费</van-button>
                <van-button type="primary" size="small" class="mediate-nav-button">津贴优惠</van-button>
                <van-button type="primary" size="small" class="mediate-nav-button">跨天预订</van-button>
            </div> -->
            <van-row class="mediate-nav">
              <van-col span="6">
                <van-button type="primary" to="/orderDetails" size="small" class="mediate-nav-button">点评最高</van-button>
              </van-col>
              <van-col span="6">
                <van-button type="primary" size="small" class="mediate-nav-button">减配送费</van-button>
              </van-col>
              <van-col span="6">
                <van-button type="primary" size="small" class="mediate-nav-button">津贴优惠</van-button>
              </van-col>
              <van-col span="6">
                <van-button type="primary" size="small" class="mediate-nav-button">跨天预订</van-button>
              </van-col>
            </van-row>

            <div v-if="!isLoading" 
              style="display: flex;
              justify-content: center;
              align-items: center;">
              <van-loading style="margin: auto;" size="15px">
                加载中...
              </van-loading>
            </div>
            <!-- 遍历商家 -->
            <van-list
              v-else
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >

            <div class="div"  v-for="item in list" :key="item.shopId">
              <van-cell-group inset>
                <Stores :item="item"/>
              </van-cell-group>
            </div>

            </van-list>

        </van-row>
    </div>
</template>

<script>
import AMapLoder from "@amap/amap-jsapi-loader"
window._AMapSecurityConfig = {
  securityJsCode: '076a11c5506a73967e139cab3f76629a',
}
import axios from 'axios';
import Stores from '../shop/Stores.vue'
export default {
    name:"Home", 
    components:{Stores},
    data(){
      return{
        tl:true,
        tl2:false,
        active:0,
        aa:[{id:1,icon:"美食.png",name:"美食"},{id:2,icon:"甜点饮品.png",name:"甜点饮品"},{id:3,icon:"超市便利.png",name:"超市便利"},
        {id:4,icon:"生鲜果蔬.png",name:"生鲜果蔬"},{id:5,icon:"看病买药.png",name:"看病买药"},{id:6,icon:"晚餐优选.png",name:"晚餐优选"},
        {id:7,icon:"天天神券.png",name:"天天神券"},{id:8,icon:"跑腿.png",name:"跑腿"},{id:9,icon:"拼好饭.png",name:"拼好饭"},
        {id:10,icon:"汉堡披萨.png",name:"汉堡披萨"},{id:11,icon:"小吃馆.png",name:"小吃馆"},{id:12,icon:"鲜花蛋糕.png",name:"鲜花蛋糕"},
        {id:13,icon:"鸭脖卤味.png",name:"鸭脖卤味"},{id:14,icon:"龙虾烧烤.png",name:"龙虾烧烤"},{id:15,icon:"异国料理.png",name:"异国料理"}],
        list: [],
        container:[],
        area:'',// 地区
        loading: false,// 数据全部加载完成
        finished: false, // 加载状态结束
        page:1, // 页码
        limit:10, // 每页数量
        isLoading:true, // 是否加载完毕
        baseUrl: 'http://localhost:8081/images/item/',
      }
  },
  methods:{
    //拼接地址
    getImagePath(imgName){
        return `${this.baseUrl}${imgName}`;
    },
    search(){
      this.$router.push({path:"/search"})
    },
    bb(id){
      this.$router.push({path:`/shopType/${id}`})
    },
    onLoad() {
      
      // 异步更新数据
      axios.post("http://localhost:9090/api/shop/getListShopPaging",{
          page:this.page,
          limit:this.limit,
          shopAddress:"广东省珠海市斗门区"
      })        
        .then(res => {    
          console.log(res.data.data);
          this.container = res.data.data;
        })        
        .catch(err => {            
            console.log(err.data)        
        }) 
      // setTimeout ajax 请求
      setTimeout(() => {
        for (let i = 0; i < this.container.length; i++) {
          this.list.push(this.container[i]);
        }
        if (this.container.length === 0) {
          this.finished = true;
        } else {
          this.page++;
        }
        // 加载状态结束
        this.loading = false;
      }, 1000);
    },
    scroll(){
      let thta = this;
      this.$store.state.active = 0 ;
      window.addEventListener("scroll",function(){

          var element = document.getElementsByClassName("contained-inpt")[0];
          var element1 = document.getElementsByClassName("header1")[0];
          var element2 = document.getElementsByClassName("contained-inpt1")[0];
          var element3 = document.getElementsByClassName("mediate-nav")[0];
          var element4 = document.getElementsByClassName("mediate-nav-button")[0];

          var scrollPosition = window.scrollY;
          if(element && element1 &&  scrollPosition >70){
              thta.tl = false;
              thta.tl2 = true;   
              element1.style.backgroundColor="white";
              if (element2 !== undefined) {
                element2.style.width="500px";
              }
              
          }
          if(element3 && element4 && scrollPosition >300){
              element3.style.backgroundColor="white";
              for(var i=0;i < element4.length;i++){
                  element4[i].style.backgroundColor="#575859";
              }
              
          }
          if(scrollPosition < 250){
              if(element3 !== undefined){
                element3.style.backgroundColor="#f5f5f6";
              }
          }
          if(scrollPosition <70){
            if (element !== undefined && element1 !== undefined) {
              element.style.borderRadius= "30px 30px 0px 0px" ;
              thta.tl = true;
              thta.tl2 = false
              element1.style.backgroundColor="#ffe233";
            }
          }
      })
    },
   
    gaodeditu(){
      let thta = this;
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
          var latitude = position.coords.latitude;
          var longitude = position.coords.longitude;
          console.log("加载地图后的经纬度="+latitude,longitude);
          // 将经纬度传递给高德地图 API 进行后续操作
          // axios.get("https://restapi.amap.com/v3/geocode/regeo?output=JSON&location="+longitude+","+latitude+"&key=839bfb965ce089afc2306a5e7ee29000&radius=1000&extensions=all",{
            axios.get("/amap/regeo",{
            params:{
              output:"JSON",
              location:location+","+latitude,
              key:"839bfb965ce089afc2306a5e7ee29000",
              radius:"1000",
              extensions:"all"
            }
          }).then((res) => {
            console.log("获取当前地址",res.data);
            thta.area = res.data.regeocode.addressComponent.district;
            setTimeout(() => {
              thta.isLoading = true;
            }, 1000);
          })
          // console.log("纬度: " + latitude + " 经度: " + longitude);
      });
      } else {
          console.log("Geolocation is not supported by this browser.");
      }
    }

  },
  created(){
   
  },
  mounted(){
    this.gaodeditu()
  }
}
</script>
  
<style scoped>

.cler_float::after{   
    display: block;
    clear: both;
}
.header{
  background-color: #ffe233;
  width: 100%;
  height: 70px;
  /* position: sticky; */
  /* z-index: 999; */
  /* top: 0; */
}

.header1{
  background-color: #ffe233;
  /* background-color: red; */
  width: 100%;
  height: 70px;
  position: sticky;
  z-index: 999;
  top: 0;
}

.header-pos{
  display: block;
  margin-left: 10px;
  margin-bottom: 10px;
  font-size: 20px;
}

.contained{
  background-color: #f5f5f6;
}

/* .contained .contained-inpt-div{ */
/* border-radius: 30px 30px 0px 0px; */
/* background-color: #ffe233; */
/* } */

.header1 .contained-inpt-div1{
  background-color: white;
  height: 70px;
}

.contained .contained-inpt{
border-radius: 30px 30px 0px 0px;
height: 50px;
padding-top: 20px;
padding-bottom: 20px;
}

.contained .contained-grid{
  background-color: #f5f5f6;
}
.inpt-contained{
  background-color: #ffe233;
}
.van-search__content--round{
  border: 1px solid #ffdd00;
  background-color: white;
}
.van-button--primary{
  width: 90px;
  background-color: #fdfdfd;
  color: #575859;
  border: 0.5px solid white;
  border-radius: 5px 5px;
}
.mediate-nav{
  margin-top: 10px;
  text-align: center;
  /* position: sticky; */
  /* top: 70px; */
  /* z-index: 999; */
  height: 32px;
  background-color: #f5f5f6;
}

html,body{
  margin: 0;
  padding: 0;

}
body{
  background-color: #a5a5a5;
}
.van-cell-group--inset {
  width: 95%;
}
.div{
  margin-bottom:9px;
  margin-top: 9px;
}
.div .van-cell-group--inset{
  margin: auto;
}
.van-cell__title {
    margin-left: 10px;
}


</style>
